<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入本地资源 -->
		<!-- 引入vue.js -->
		<script src="js/vue.js"></script>
		<!-- 引入elementui的js资源 -->
		<script src="js/element/index.js"></script>
		<!-- 引入elementui的css样式 -->
		<link rel="stylesheet" href="css/index.css" />
		<!-- 引入网络请求库axios -->
		<script src="js/axios.min.js"></script>
		<!-- 引入qs，处理参数问题，将参数序列化 -->
		<script src="js/qs.min.js"></script>

		<!-- 引入cdn上的地址 -->
		<!-- 引入样式 -->
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
		<!-- 引入组件库 -->
		<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
	</head>
	<body style="background-color: #269ABC;">
		<div id="app">
			<el-form style="margin-top: 200px;" :model="userBean" status-icon ref="userBean" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-col :span="12" :offset="6">
						<h2 style="color: #FFFFFF;margin-left: 270px;">教务管理系统</h2>
						<el-form-item  prop="username">
							<el-input prefix-icon="el-icon-user-solid" type="text" v-model="userBean.username" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item  prop="userpwd">
							<el-input  prefix-icon="el-icon-s-goods" type="password" v-model="userBean.userpwd" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="8">
						<el-form-item>
							<el-button type="primary" @click="login()">提交</el-button>
							<el-button @click="resetForm('userBean')">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					userBean: {
						username: "",
						userpwd: ""
					}
				},
				methods: {
					login: function() {
						// 在方法中，this指向vue对象，当发送请求后，this指向为window
						console.log(this)
						// 需要使用vue对象，可以将vue保存后，再引用
						var that=this
						console.log(this.userBean)
						console.log("Qs.stringify::::::"+Qs.stringify(this.userBean))
						// 通过axios的网络请求库发送get请求
						axios.post("http://localhost:8086/userlogin",Qs.stringify(this.userBean)).
						then(function(response){
							if(response.data=="ok"){
								window.location.href="welcome.html"
							}
						}).
						catch(function(err){    
							
						})

					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					}
				}
			})
		</script>



	</body>
</html>
